<!--  -->
<template>
  <a-modal
    v-model:visible="visible"
    :keyboard="false"
    :maskClosable="false"
    :footer="null"
    :closable="false"
    :getContainer="getContainer"
    :width="modalWidth"
    @cancel="visible = false"
    :bodyStyle="{ padding: '0px' }"
  >
    <div class="pageHeader">
      <a-space>
        <div class="icon" @click="cancelModal">
          <arrow-left-outlined />
          返回
        </div>
        <div class="symbol">|</div>
        <div class="title">{{ title }}</div>
      </a-space>
    </div>
    <div class="slotContent">
      <slot></slot>
    </div>
  </a-modal>
</template>

<script>
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    getContainer: {
      type: null,
      default: null,
    },
    modalWidth: {
      type: Number,
      default: 1200,
    },
    title: {
      type: String,
      default: '对话框',
    },
  },
  components: {
    ArrowLeftOutlined,
  },
  methods: {
    cancelModal() {
      this.$emit('cancelModal');
    },
  },
};
</script>
<style lang="less" scoped>
.pageHeader {
  display: flex;
  padding: 20px;
  .icon {
    width: 50px;
  }
  .icon:hover {
    cursor: pointer;
    color: #3e8ef7;
  }
  .symbol {
    color: #dcdfe6;
  }
  .title {
    font-size: 20px;
  }
}
.slotContent {
  padding: 20px;
}
</style>
